<template>
	<view>
		<!-- <u-navbar :title="title" bgColor="#4F6FF6" leftIconColor="#000" :safeAreaInsetTop="true"
			:placeholder="true" :autoBack="false" :titleStyle="{
						'color':'#FFFFFF',
						'textAlign':'left'
					}" titleWidth="600rpx" >
			<view slot="left">
				<slot name="left"></slot>
				<view v-if="isBack" @click="toback()">
					<u-icon name="arrow-left" size="19" color="#FFFFFF" ></u-icon>
				</view>
			</view>
			<view slot="center" class="center" :class="!hideLeft?'toleft':''">
				<slot name="title"></slot>
				<view class="bartitle" v-if="title" :style="{
					textAlign:hideLeft?'left':'center'
				}">{{title}}</view>
			</view>
		 
		</u-navbar> -->

	</view>
</template>
<script>
	const capsule = wx.getMenuButtonBoundingClientRect()
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			isBack: {
				type: Boolean,
				default: true
			},
			hideLeft: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				currentPages: getCurrentPages().length,
				capsule: (capsule.width + 12) + 'px',
			}
		},
		computed: {
			showHome() {
				if (getCurrentPages().length <= 1) {
					return true
				}
				return false
			}
		},
		methods: {
			leftClick() {
				// console.log('leftClick');
			},
			toback() {
				if (getCurrentPages().length <= 1) {
					// console.log('leftClick');
					uni.reLaunch({
						url: '/pages/index/index?active=0'
					});
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
				// console.log(111)
				// uni.navigateBack({
				// 	delta: 1
				// });
			},
			tohome() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}

		}
	}
</script>

<style scoped lang="scss">
	.u-nav-slot {
		display: flex;
		align-items: center;
		border-radius: 25rpx;
		height: 50rpx;
		border: 1px solid #eee;
		padding: 0 20rpx;
		color:#FFFFFF;
	}

	.rightIcon {
		position: absolute;
		width: 100;
		// right: 180rpx!important;
		
	}

	.center {
		flex: 1;
		text-align: left;
		padding: 0 20px 0 20px;

		.bartitle {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			// width: 430rpx;
			text-align: center;
			color:#FFF;
		}

		&.toleft {
			// margin-left: 20px;
		}
	}

	button {
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		justify-content: center;
		align-items: center;
		border-color: transparent;
		border-style: none;
		// background: rgba(24, 139, 126, 1);

		font-size: 28rpx;
		line-height: 28rpx;
		color: #999999;
	}

	button::after {
		border: none;
	}
 
</style>